<template>
	<view>
		<view class="custom-nav">
			<view class="top">
				<image class="xx" src="../../static/images/消息中心.png" mode=""></image>
				<view class="nav-title">首页</view>
			</view>
			<view class="ss" @click="toCity">
				<image class="dw" src="../../static/images/定位2.png" mode=""></image>
				<input class="in" type="text" />
				<image class="sx" src="../../static/images/刷新 (1).png" mode=""></image>
				<text class="text">刷新</text>
			</view>
		</view>

		<view style="margin: 0 10px;">
			<uni-grid class="dh" :column="4" :highlight="true" @change="change" :show-border="false">
				<uni-grid-item v-for="(item, index) in list" :index="index" :key="index">
					<navigator :url="item.url" class="grid-item-box">
						<view class="img" :style="{ 'background-color': item.color }">
							<image class="image" :src="item.src" />
						</view>
						<text class="text">{{item.text}}</text>
					</navigator>
				</uni-grid-item>
			</uni-grid>
		</view>
		<uni-card @click="toMore" style="height: 300px;" title="附近加油站" sub-title="根据您的位置为您推荐最近的加油站" extra="更多">
			<view class="page-section page-section-gap">
				<map style="width: 100%; height: 300px;" :latitude="latitude" :longitude="longitude" :markers="covers">
				</map>
			</view>
		</uni-card>
		<view class="yh">
			<view class="top">
				<view>
					<view style="font-size: 20px;">优惠团购</view>
					<view style="font-size: 10px;">优惠活动尽在此处</view>
				</view>
				<view class="more" @click="toTG">更多</view>
			</view>
			<view class="item">
				<view v-for="item in groupList" :key="item.id" @click="toYouhui(item.id)">
					<image class="img" :src="item.img" mode="aspectFill"></image>
					<view>{{item.title}}</view>
				</view>
			</view>
		</view>
		<navigator url="/pages/zwj/yingjijiuyuan/yingjijiuyuan" class="jiuyvan">
			<image style="width: 20px; height: 20px;margin-top: 12px;margin-left: 16px;" src="/static/images/示警.png"
				mode=""></image>
		</navigator>
	</view>

</template>

<script>
import request from '../../uitls/request'
	export default {
		data() {
			return {
				id: 0, // 使用 marker点击事件 需要填写id
				title: 'map',
				latitude: 39.909,
				longitude: 116.39742,
				covers: [{
					latitude: 39.909,
					longitude: 116.39742,
					iconPath: '../../../static/images/location.png'
				}, {
					latitude: 39.90,
					longitude: 116.39,
					iconPath: '../../../static/images/location.png'
				}],
				dynamicList: [],
				list: [{
						src: '../../static/images/车辆维修1-01.png',
						text: '汽车维修',
						color: "#4A75F6",
						url: "/pages/zwj/cheliangweixiu/cheliangweixiu"
					},
					{
						src: '../../static/images/保养.png',
						text: '汽车保养',
						color: '#FFAC39',
						url: "/pages/zwj/qichebaoyang/qichebaoyang"
					},
					{
						src: '../../static/images/洗车.png',
						text: '专业洗车',
						color: '#5EDC2A',
						url: "/pages/yonghu1/zhuanyexiche/zhuanyexiche"

					},
					{
						src: '../../static/images/加油枪 (1).png',
						text: '加油站点',
						color: "#4A91FC",
						url: "/pages/nearby-gas/map-mode/map-mode"
					}
				],
				groupList:[],//新增优惠团购数据

			}
		},
		onLoad() {
			this.loadGroupData();
		},
		methods: {
			toCity(){
				uni.navigateTo({
					url: '/pages/city/city'
				})
			},
			toYouhui(id){
				uni.navigateTo({
					url: '/pages/user3/groupcount/groupcount?id='+id
				})
			},
			toMore() {
				uni.navigateTo({
					url: '/pages/nearby-gas/nearby-gas'
				})
			},
			toTG(){
				uni.navigateTo({
					url: '/pages/jackwang/tuangouyouhui/tuangouyouhui'
				})
			},
			loadGroupData() {
						request({
							url: '/offer/purchase/list',
							method: 'GET',
							params:{
								pageNum:1,
								pageSize:10,
							},
							header:{
								'Authorization':uni.getStorageSync('token')
							},
							success: (res) => {
								if (res.data.code === 200) {
									this.groupList = res.data.rows.slice(0,4);
									uni.showToast({
										title:'加载成功',
										icon:'success',
									});
									console.log(this.groupList);
								} 
							},
							fail: (err) => {
								console.error('请求失败', err);
								uni.showToast({
									title: '网络错误',
									icon: 'none'
								});
							}
						});
					},
			change(e) {
				let {
					index
				} = e.detail
				this.list[index].badge && this.list[index].badge++

				uni.showToast({
					title: `点击第${index+1}个宫格`,
					icon: 'none'
				})
			},
		}
	}
</script>

<style scoped>
	.top{
		display: flex;
		justify-content: space-between;
	}
	.more{
		margin-top: 30rpx;
		color: #75b9ff;
	}
	.jiuyvan {
		width: 51px;
		height: 51px;
		background-color: red;
		position: fixed;
		bottom: 20px;
		/* 固定在页面底部 */
		left: 50%;
		/* 固定在页面右侧 */
		transform: translate(-50%);
		z-index: 9999;
		/* 确保在其他元素之上 */
		border-radius: 25px;
	}


	.custom-nav {
		width: 100%;
		padding-bottom: 40px;
		background: url('../../static/images/图层 1.png');
		background-repeat: no-repeat;
		background-size: cover;
	}

	.nav-bg {
		width: 100%;
		height: 100%;
	}

	.nav-title {
		text-align: center;
		font-size: 18px;
		color: #fff;
		line-height: 44px;
		/* 根据实际需要调整 */
		padding-top: 20px;
		margin-left: auto;
		margin-right: auto;
	}

	/* 	.top{
		display: flex;
	} */

	.xx {
		position: absolute;
		margin-left: 20px;
		margin-top: 30px;
		width: 15px;
		height: 15px;
		z-index: 2;
	}

	.ss {
		display: flex;
		margin: 20px;
		background-color: white;
		height: 30px;
		border-radius: 15px;
		line-height: 20px;
	}

	.ss .dw {
		position: absolute;
		margin-top: 8px;
		margin-left: 15px;
		width: 15px;
		height: 15px;
	}

	.ss .sx {
		position: absolute;
		right: 80px;
		margin-top: 8px;
		width: 15px;
		height: 15px;
	}

	.ss .in {
		margin-top: 14px;
		margin-left: 50px;
		width: 70%;
	}

	.ss .text {
		margin-top: 5px;
		margin-left: 10px;
		color: blue;
		font-size: 12px;
	}

	.dh {
		margin-top: -40px;
		background-color: #fff;
		border-radius: 20px;
	}

	.page-body {
		margin: 20px;
		background-color: #fff;
	}

	.page-body .top {
		height: 50px;
		padding-top: 20px;
	}

	.yh {
		background-color: #fff;
		margin: 20px;
		padding: 20px;

	}

	.yh .img {
		width: 140px;
		height: 100px;
		border-radius: 15px;
	}

	.yh .item {
		margin-top: 20px;
		display: flex;
		justify-content: space-between;
		flex-wrap: wrap;
	}

	.dh .img {
		width: 40px;
		height: 40px;
		border-radius: 10px;
		background-color: skyblue;
		margin: 10% auto;
	}

	.dh .image {
		margin-top: 10px;
		margin-left: 7px;
		width: 26px;
		height: 20px;
	}

	.dh .text {
		display: block;
		text-align: center;
		font-size: 14px;
		margin: 0 auto;
	}


</style>